<template>
  <div class="home-page">
    <div class="top-board">

        <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <img
        style="width: 100px"
        src=""
        alt="GalGal"
      />
    </el-menu-item>
    <el-menu-item index="1">主页</el-menu-item>
    <el-menu-item index="2">论坛</el-menu-item>
    <el-menu-item index="3">其他</el-menu-item>
    <el-input
      v-model="inputwords"
      style="width: 340px"
      placeholder="回车搜索"
      :prefix-icon="Search"
      class="search-input"
    />

    <div class="search">
      <gIcon :icon="iconList.search" @click="gotoSearch"></gIcon>
      <el-select
      v-model="labelList"
      multiple
      collapse-tags
      placeholder="选择搜索标签"
      style="width: 140px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    </div>

    <div class="flex-grow"></div>
    <el-sub-menu index="4" v-if="islogined">
      <template #title>{{ username }}</template>
      <el-menu-item index="4-1" @click="goUserCenter(0)">用户中心</el-menu-item>
      <el-menu-item index="4-2">上传游戏</el-menu-item>
      <el-menu-item index="4-1" @click="exitLogin()">退出登录</el-menu-item>
    </el-sub-menu>
    <gIcon v-else :icon="iconList.loginin" @click="loginShow = true" class="login-icon"></gIcon>
  </el-menu>

    </div>

    <div class="main-content">

<!--  、、、、、、、、、、、随机推荐 、、、、、、、、、、、 -->
    <div id="sample" class="carousel" style="width: 100%;"hidden >
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in sampleList" :key="item" @click="gotoGameDetail(item.gid)">      
            <img :src="attchFirstPic(item.gid)" style="object-fit:fill;width: 100%;height: 100%;border-radius: 10px;">
          </el-carousel-item>
        </el-carousel>
      </div>

<!--  、、、、、、、、、、、固定推荐 、、、、、、、、、、、 -->
      <div id="fixed" class="carousel" style="width: 100%;">
        <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in carouselList" :key="item">      
          <img :src="item" style="object-fit:fill;width: 100%;height: 100%;border-radius: 10px;">
        </el-carousel-item>
      </el-carousel>
      </div>

      <div class="game-list">
        <ul>
          <li v-for="item in gameList" @click="gotoGameDetail(item.gid)">
            <div class="img-container">
              <img :src="attchFirstPic(item.gid)">
            </div>
            <div class="game-info">
              <span>{{ item.name }}</span>
              <span>{{ "发行时间：" + formatDate(item.date) }}</span>
            </div>
          </li>
        </ul>
        <div class="load-more" @click="getGameList" v-if="hasMoreData">
          <gIcon :icon="iconList.load"></gIcon>
          <span>{{ "加载更多" }}</span>
        </div>
      </div>
    </div>
</div>


<el-dialog v-model="loginShow" :title="isRegister ? '注册' : '登录'" width="500">
    <el-form class="login-form" v-if="!isRegister">
      <el-form-item label="邮箱" label-width="140px">
        <el-input v-model="loginform.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" label-width="140px">
        <el-input v-model="loginform.password" autocomplete="off" />
      </el-form-item>
    </el-form>
    <el-form class="register-form" v-else>
      <el-form-item label="用户名" label-width="140px">
        <el-input v-model="registerform.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" label-width="140px">
        <el-input v-model="registerform.email" autocomplete="off" />
      </el-form-item> 
      <el-form-item label="验证码" label-width="140px" style="display: flex;">
        <el-input v-model="registerform.code" style="flex: 0.7;" autocomplete="off" />
        <el-button type="primary" style="flex: 0.3;" :disabled=" limitTime == 0 ? false : true" @click="sendEmail">获取验证码</el-button>
      </el-form-item>
      <el-form-item label="密码" label-width="140px">
        <el-input v-model="registerform.password" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isRegister = !isRegister">{{ isRegister ? "登录" : "注册" }}</el-button>
        <el-button type="primary" @click="registerUser">{{ isRegister ? "确认注册" : "确定登录" }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, getCurrentInstance, computed, onBeforeMount} from 'vue'
import { Search } from '@element-plus/icons-vue'
import gIcon from '../components/gIcon.vue'
import { icons } from '../assets/icons/icon'
import { HttpRequest } from '@/request/request'
import { userInfo } from '@/stores/user'
import { searchInfo } from '../stores/search'
import { time } from 'console'
import { exit } from 'process'

export default defineComponent({
  components:{
    gIcon
  },
  setup(){

    onBeforeMount(()=>{
      getSampleList();
      getGameList();
    })

    const proxy = getCurrentInstance()?.proxy;
    const titles = ['主页','论坛']
    const activeIndex = ref<number>();
    const inputwords = ref<string>("");
    const loginShow = ref(false);
    const dialogFormVisible = ref(false);
    const loginform = reactive({
      email:"",
      password:""
    });
    const registerform = reactive({
      username:"",
      email:"",
      code:"",
      password:""
    })
    const iconList = {
      loginin : icons.loginin,
      search:icons.search,
      load:icons.load
    }
    
    const carouselList = [
      "src/assets/images/carousel_1.webp",
      "src/assets/images/carousel_2.jpg",
      "src/assets/images/carousel_3.webp",
      "src/assets/images/carousel_4.webp",
    ]
    const islogined = computed(()=>userInfo().isLogined);
    const username = computed(()=>userInfo().name);
    const isRegister = ref(false);
    const limitTime = ref<number>(0);
    const gameList = ref<[]>([]);
    const sampleList = ref<[]>([]);
    const offset = ref(0);
    const labelList = ref<[]>([]);
    const searchWord = ref("");
    const hasMoreData = ref(true);
    const options = [
        {
          value: '视觉小说',
          label: '视觉小说',
        },
        {
          value: '恋爱模拟',
          label: '恋爱模拟',
        },
        {
          value: '角色扮演',
          label: '角色扮演',
        },
        {
          value: '青春',
          label: '青春',
        },
        {
          value: '校园',
          label: '校园',
        },
        {
          value: '战斗',
          label: '战斗',
        },
        {
          value: '科幻',
          label: '科幻',
        },
        {
          value: '玄幻',
          label: '玄幻',
        },
        {
          value: '热血',
          label: '热血',
        },
        {
          value: '冒险',
          label: '冒险',
        },
        {
          value: '悬疑',
          label: '悬疑',
        },
        {
          value: '恐怖',
          label: '恐怖',
        },
        {
          value: '少女',
          label: '少女',
        },
        {
          value: '穿越',
          label: '穿越',
        },
        {
          value: '养成',
          label: '养成',
        },
      ]


    function handleSelect(){
      

    }
    async function sendEmail() {
      if(registerform.email == '' || registerform.email == null) {
        (proxy as any).$message({
          message:"请先填入邮箱",
          type:"warning"
        })
        return;
      }
      const result = await HttpRequest.sendEmailCode(registerform.email) as responseBody;
      (proxy as any).$message({
          message:result.msg,
          type:result.type,
        })
    }

    async function registerUser(){
      if(isRegister.value){
        if(registerform.username == '' || registerform.password == '' || registerform.code == '' || registerform.email == ''){
        (proxy as any).$message({
          message:"请完整填写表格",
          type:"warning"
        })
        return;
      }
      const result = await HttpRequest.registerUser(registerform.username,registerform.email,registerform.code,registerform.password) as responseBody;
      (proxy as any).$message({
          message:result.msg,
          type:result.type
        });
      if(result.success){
        isRegister.value = false;
      }
      }
      else{
        userLogin();
      }
    }

    async function userLogin() {
      if(loginform.email == '' || loginform.password == '') {
        (proxy as any).$message({
          message:"请完整填写邮箱和密码",
          type:"warning"
        })
        return;
      }
      const result = await HttpRequest.userLogin(loginform.email,loginform.password) as responseBody;
      (proxy as any).$message({
          message:result.msg,
          type:result.type
        })
      if(result.success) {
        loginform.email = '';
        loginform.password = '';
        loginShow.value = false;
        userInfo().setuid(result.data.uid);
        userInfo().setname(result.data.name);
        userInfo().setLogin(true);
        userInfo().setavatar(result.data.avatar);
      }
    }

    function exitLogin(){
      userInfo().setLogin(false);
      userInfo().setuid(null);
      userInfo().setavatar(null);
      userInfo().setname(null);
    }

    function goUserCenter(index:number){
      if(index == 0){
        proxy?.$router.push('/usercenter')
      }
    }
//////////////////随机推荐 ///////////////////////
    async function getSampleList(){
      const result = await HttpRequest.getSampleList() as responseBody;
      if(result.success){
        document.getElementById('sample').hidden = false;
        document.getElementById('fixed').style.display = 'none';
        sampleList.value = result.data;
        (proxy as any).$message({
          message:result.msg,
          type:"success",
          duration:1000
        })
      }else{
        (proxy as any).$message({
          message:"暂无更新数据",
          type:"warning",
          duration:2000
        })
      }
    }

  


    async function getGameList(){
      const result = await HttpRequest.getGameList(offset.value) as responseBody;
      if(result.success){
        if(result.data.length == 0){
          hasMoreData.value = false;
          (proxy as any).$message({
          message:"暂无数据",
          type:"warning"
        })
        }
        else{
          gameList.value.push(...result.data);
        offset.value += result.data.length;
        }
        
      }
      else{
        (proxy as any).$message({
          message:result.msg,
          type:result.type
        })
      }
    }

    function formatDate(cellValue:string){
      const date = new Date(cellValue);
      return  date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
    }

    function gotoGameDetail(gid:number){
      if(gid != null)
      proxy?.$router.push(`/gamedetail/${gid}`);
    }

    function gotoSearch(){
      if(inputwords.value == null || inputwords.value == "") 
        inputwords.value = "";
      
      searchInfo().setsearchWord(inputwords.value);
      searchInfo().setlabelList(labelList.value);
      proxy?.$router.push('/search');
    }

    
    return {
      titles,
      activeIndex,
      handleSelect,
      inputwords,
      Search,
      loginShow,
      dialogFormVisible,
      loginform,
      iconList,
      islogined,
      isRegister,
      limitTime,
      registerform,
      sendEmail,
      registerUser,
      username,
      goUserCenter,
      carouselList,
      gameList,
      attchFirstPic:HttpRequest.attchFirstPic,
      formatDate,
      gotoGameDetail,
      labelList,
      options,
      gotoSearch,
      getGameList,
      hasMoreData,
      sampleList,
      exitLogin
    }  
  }
})

</script>

<style scoped>
.home-page{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.top-board{
  width: 100%;
  display: flex;
  padding-top: 10px;
  .top-log{
    flex: 0.2;
  }
  .top-sort{
    flex: 0.2;
  }
  .top-search{
    flex: 0.4;
  }
  .top-user{
    flex: 0.2;
  }
  .el-menu-demo{
    width: 100%;
    display: flex;
    align-items: center;
    .search-input{
      height: 40px;
    }
    .flex-grow{
      width: 10%;
    }
    .el-menu-item{
      margin: 0 10px;
    }
  }

  .search{
    display: flex;
    .icon{
      margin: 0 20px;
    }
    .icon:hover{
      opacity: 0.6;
      cursor: pointer;
    }
  }
}

.login-icon:hover{
  color: #1296db;
  cursor: pointer;
}

.main-content{
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.game-list{
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
  ul{
    width: 100%;
    display: flex;
    li:hover{
      opacity: 0.8;
      cursor: pointer;
    }
    li{
      width: 18%;
      margin: 1%;
      height: 0;
      padding-bottom: 18%;
      border-radius: 5%;
      box-shadow: 0 0 5px 2px rgba(94, 93, 93, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      .img-container{
        width: 40%;
        height: 0;
        position: relative;
        padding: 30%;
        img{
          width: 100%;
          height: 100%;
          border-radius: 5px;
          left: 0;
          top: 0;
          position: absolute;
        }
      }

      .game-info{
        width: 90%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        
        span{
          font-weight: 550;
          font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
          color: #475669;
          margin: 5px 0;
        }
      }
    }
  }

  .load-more{
    display: flex;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;

  }
  .load-more:hover{
    color: #1296db;
    cursor: pointer;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
}



</style>
